<script setup lang="ts">
import Mock from 'mockjs'
import type { RequestConfig, TLOperationColumn, TLFilterItem } from '@ag/design'
import { AgFilters } from '@/constants'
import { columns } from './columns'

const filters: TLFilterItem[] = [
  {
    label: '关键词',
    componentName: AgFilters.Input,
    placeholder: '姓名/手机号',
    field: 'keywords'
  },
  {
    label: '播种类型',
    componentName: AgFilters.SowTypeSelect,
    field: 'sowType'
  }
]

const requestConfig: RequestConfig = {
  url: '/agronomic/v1/remoteFarm/getList',
  mockData: () => {
    return Mock.mock({
      code: 0,
      data: {
        total: 30,
        'list|10': [
          {
            username: '@cname',
            roleName: '@ctitle',
            serviceArea: '@ctitle',
            farmCount: '@natural(10, 50)',
            phone: /1[35789]\d{9}/,
            creatorName: '@cname',
            createDate: '@date'
          }
        ]
      }
    })
  },
  formatResponse: (res: any) => {
    return {
      total: res.data?.total,
      list: res.data?.list
    }
  }
}

const operationColumn: TLOperationColumn = {
  operations: [
    {
      label: '发布',
      key: 'config',
      action: (row: any) => {
        alert('发布')
      }
    }
  ]
}

const handleRoleManage = () => {
  alert('哟，被你发现了')
}
</script>

<template>
  <div class="system-list">
    <TableList
      :filters="filters"
      :request-config="requestConfig"
      :columns="columns"
      :operation-column="operationColumn"
    >
      <template #filterRight>
        <el-button type="primary" @click="handleRoleManage">角色配置</el-button>
      </template>
    </TableList>
  </div>
</template>

<style lang="scss" scoped>
.system-list {
  padding-top: 16px;
}
</style>
